<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="pub/top_list2.jsp"%>   

 <%
 String names = (String) request.getSession().getAttribute("name");
 String productid = (String) request.getParameter("productid");
 String[] params = new String[1];
 params[0] =productid;
 String sql = "SELECT * FROM  goodsx  where  productid=?";
 List<Map<String, Object>> list= db.queryList(sql, params);
 
 MyDB db2 = My.getDb1();
 String sql2="select * from goodinfo where productid=?";
 Map<String, Object> map= db2.queryMap(sql2, params);
 //System.out.println(map.get("des"));
 
 //查询价格范围
 MyDB db3 = My.getDb1();
 String sql3="select max(oprice) as maxprice,min(oprice) as minprice from goodjiage where goodsxid in(select goodsxid from goodsx where productid=?)";
 Map<String, Object> op= db3.queryMap(sql3, params);
 
 //查询商品属性
 MyDB db4 = My.getDb1();
 String sql4="select a.goodsxid, a.sxname,b.classify from  goodsx a,shuxing b,goodinfo c  where a.sxid=b.sxid and a.productid=c.productid and b.sxid in (select sxid from goodsx where productid=?)";
 List<Map<String, Object>> mp= db4.queryList(sql4, params);
 
 MyDB db5 = My.getDb1();
 String sql5="select c.* ,DATE_FORMAT(a.evaluate,'%Y.%m.%d') as evaluate1,b.evaluate as evaluate2,d.NickName,d.touxiang ,e.sxname,f.classify from dingdanmx c,dingdan a,evaluatemx b,member d ,goodsx e,shuxing f where d.userid=a.userid and  c.orderid=b.orderid and c.orderid=a.orderid and c.goodsxid=e.goodsxid and e.sxid=f.sxid and c.goodsxid in(select goodsxid from goodsx where productid=?)";
 List<Map<String, Object>> list5= db5.queryList(sql5, params);
 //System.out.println(list5);
%>
<script>
var gid=""
function fun(id){
	var state=1;
	$.ajax({
		type : 'post',
		url : 'test.jsp',
		data : {"id":id,"state":state},
		success : function(data) {
			var map=JSON.parse(data);
		    var price=map.oprice.toFixed(2);
		    var yunfei=map.yunfei;
		    document.getElementById("oprice").innerHTML =price;
		}
	});
	gid=id;
}
function fun1(){
	/* var goodsxid= document.getElementById("oprice").innerHTML; */
	var goodsxid=gid;
	if(goodsxid==null||goodsxid==""){
		alert("请先选择商品")
		return
	} 
	var userid='<%=names%>';
	var state=2;
	$.ajax({
		type : 'post',
		url : 'test.jsp',
		data : {"goodsxid":goodsxid,"userid":userid,"state":state},
		success : function() {
			alert("添加成功")
		}
	});
}
function funb(){
   var goodsxid=gid;
   if(goodsxid==null||goodsxid==""){
		alert("请先选择商品")
		return
   }
   var oprice= document.getElementById("oprice").innerHTML;
   var yunfei='<%=map.get("yunfei")%>';
   var userid='<%=names%>';
   var state=8;
   $.ajax({
		type : 'post',
		url : 'test.jsp',
		data : {"goodsxid":goodsxid,"userid":userid,"state":state,"yunfei":yunfei,"oprice":oprice},
		success : function(data) {
			var id=data;
			window.location.href="buy2.jsp?goodsxid="+goodsxid+"&id="+id;	
		}
	});
}
</script>
<body>
	<header class="detail-header fixed-header">
		<a href="javascript:history.go(-1)"><img src="images/detail-left.png"/></a>
		<a href="shop.jsp" class="right"><img src="images/shopbar.png"/></a>
	</header>
	
	
	<div class="contaniner fixed-contb">
		<section class="detail">
			<figure class="swiper-container">
				<ul class="swiper-wrapper">
				  <%
			    for (int i=0;i<list.size();i++) {
				Map m = (Map)list.get(i);
				String sximg = m.get("sximg").toString();
		          %>
					<li class="swiper-slide">
						<a href="#">
							<img src="<%=m.get("sximg")%>"/>
						</a>
					</li>
					<%} %>
				</ul>
				<div class="swiper-pagination">
				</div>
			</figure>
			<dl class="jiage">
				<dt>
					<h3><%=map.get("goodname") %></h3>
					<div class="collect">
						<img src="images/detail-heart-hei.png"/>
						<p>收藏</p>
					</div>
				</dt>
				<dd>
					<b class="oprice" id="oprice" value=""><%=op.get("minprice") %>-<%=op.get("maxprice") %></b>
					<del>￥139</del>
			<input type="button" value="￥<%=map.get("yunfei") %>" readonly />
					<small><!-- +356积分 --></small>
				</dd>
			</dl>
			<div class="chose">
			 <%
			 String classify="";
			 String sxname ="";
			 String mmm=(((Map)mp.get(0)).get("classify")).toString();
			for (int i=0;i<mp.size();i++) {
				Map m = (Map)mp.get(i);
				if(!classify.equals(m.get("classify").toString())){
					classify = m.get("classify").toString();
				}else{
					continue;
				}
		    %>
				<ul>
					<h3><%=classify %></h3>
					 <%
			for (int l=0;l<mp.size();l++) {
				Map x = (Map)mp.get(l);
				String goodsxid=x.get("goodsxid").toString();
				if(classify.equals(x.get("classify").toString())){
					sxname = x.get("sxname").toString();
				}else{
					continue;
				}
		    %>
					<li id="<%=goodsxid %>" onclick="fun(this.id)">
						<%=sxname %>
					</li>
					<%} %>
				</ul>
			<% }%>	
			</div>
			
			<a href="#" class="seven">
				<b>7</b>天无理由退换货
				<span id="sss"></span>
			</a>
			
			<!-- <ul class="same">
				<a href="#">
					<span>
						同类推荐
					</span>
					<li class="one">
						<img src="images/detail-pp01.png"/>
						<p>￥188.00</p>
					</li>
					<li>
						<img src="images/detail-pp02.png"/>
						<p>￥188.00</p>
					</li>
					<li>
						<img src="images/detail-pp03.png"/>
						<p>￥188.00</p>
					</li>
					<li>
						<img src="images/detail-pp04.png"/>
						<p>￥188.00</p>
					</li>
				</a>
			</ul> -->
			
			<article class="detail-article">
				<nav>
					<ul class="article">
						<li id="talkbox1" class="article-active">商品详情</li>
						<li id="talkbox2">评价</li>
					</ul>
				</nav>

				<section class="talkbox1">
					<%=map.get("des")%>
				</section>

				<section class="talkbox2" style="display: none;">
					<ul class="talk">
					 <%
			           for (int i=0;i<list5.size();i++) {
				           Map m5 = (Map)list5.get(i);
				           String nickname=m5.get("NickName").toString();
				           String touxiang=m5.get("touxiang").toString();
				           String clf=m5.get("classify").toString();
				           String sn=m5.get("sxname").toString();
				           String evtime=m5.get("evaluate1").toString();
				           String evt=m5.get("evaluate2").toString();
		               %>
						<li>
							<figure><img src="<%=touxiang %>"/></figure>
							<dl>
								<dt>
									<p><%=nickname %></p>
									<time><%=evtime %></time>
									<!-- <div class="star">
										<span><img src="images/detail-iocn01.png"/></span>
										<span><img src="images/detail-iocn01.png"/></span>
										<span><img src="images/detail-iocn01.png"/></span>
										<span><img src="images/detail-iocn001.png"/></span>
										<span><img src="images/detail-iocn001.png"/></span>
									</div> -->
								</dt>
								<dd><%=evt %></dd>
								<small><%=clf %>：<%=sn %></small>
								<!-- <div class="picbox">
									<img src="images/detail-pp01.png"/>
									<img src="images/detail-pp02.png"/>
									<img src="images/detail-pp03.png"/>
									<img src="images/detail-pp04.png"/>
								</div> -->
							</dl>
						</li>
						<%} %>
					</ul>
				</section>
				
			</article>
		</section>
	</div>
	
	
		<footer class="detail-footer fixed-footer">
			<a href="#" class="go-car">
				<input type="button" value="加入购物车" onclick="fun1()"/>
			</a>
			<a onclick="funb()" class="buy">
				立即购买
			</a>
		</footer>
	
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	$(window).scroll(function() {
	    if ($(".detail-header").offset().top > 50) {
        $(".detail-header").addClass("change");
    } else {
        $(".detail-header").removeClass("change");
    }
	});
</script>
<script src="js/swiper.min.js"></script>
<script type="text/javascript">
		$(document).ready(function(){
			var mySwiper = new Swiper('.swiper-container',{
				    loop: true,
				    speed:1000,
					autoplay: 2000,
					pagination: '.swiper-pagination',
				  });
		})
	</script>
<script type="text/javascript">
	$(function(){
		$('.chose li').click(function(){
				
			$(this).addClass('chose-active').siblings().removeClass('chose-active');

			var tags=document.getElementsByClassName('chose-active');//获取标签

			var tagArr = "";
	        for(var i=0;i < tags.length; i++)
	        {
	            tagArr += tags[i].innerHTML;//保存满足条件的元素

	        }
	       
	        $('#sss').html(tagArr);

		});

		$('.article li').click(function(){

			$(this).addClass('article-active').siblings().removeClass('article-active');
			if($(this).attr("id")=="talkbox1"){
				$('.talkbox1').show();
				$('.talkbox2').hide();
			}else{
				$('.talkbox2').show();
				$('.talkbox1').hide();
			}

		});	
	});
</script>
</body>
</html>